<template>
    <div v-loading="loading" class="table-page">
        <div class="table-search-box">
            <div class="search-item">
                <label>当前机构：</label> <label>{{name}}</label>
            </div>
        </div>
        <div class="table-search-box" @keyup.enter="clickSearch()">
            <div class="search-item">
                <label>时间粒度：</label>
                <div class="table-query-input">
                    <el-radio-group
                        v-model="queryData.groupBy"
                        size="medium"
                        @change="changeGroupBy()"
                    >
                        <el-radio-button label="all">所有</el-radio-button>
                        <el-radio-button label="year">年</el-radio-button>
                        <el-radio-button label="month">月</el-radio-button>
                        <el-radio-button label="day" v-show="Permission">天</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <div class="search-item" style="display: block;">
                <label>时间段：</label>
                <el-date-picker
                    v-model="queryData.times"
                    :type="datePickerType"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                    @change="clickSearch()"
                >
                </el-date-picker>
            </div>
        </div>
        <div class="table-search-box">
            <div class="search-item" style="display: block;">
                <label>统计来源：</label>
                <el-checkbox
                    v-model="sourceTypeAll"
                    :indeterminate="sourceTypeIndeterminate"
                    @change="handleCheckAllChange"
                >全选
                </el-checkbox
                >
                <span style="margin: 0 15px;"></span>
                <el-checkbox-group
                    v-model="queryData.sourceTypes"
                    style="display: inline;"
                    @change="handleCheckedSourceTypeChange"
                >
                    <el-checkbox
                        v-for="type in sourceTypes"
                        :key="type.value"
                        :label="type.value"
                    >{{ type.label }}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
        <div class="table-search-box">
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="clickSearch()"
                >确定
                </el-button>
            </div>
        </div>
        <div class="box">
            <el-tabs v-model="activeName" type="border-card">
                <el-tab-pane label="访问量统计" name="accessLog"
                >
                    <div style="float: left;margin-top: 40px;width: 300px">
                        <div>
                            <span style="font-size: 16px;">访问量统计表</span>
                            <el-button
                                style="float: right"
                                type="primary"
                                size="small"
                                icon="el-icon-download"
                                @click="exportExcel('#qq', '访问量统计表')"
                            >导出EXCEL
                            </el-button>
                        </div>
                        <el-table
                            id="qq"
                            max-height="580"
                            border
                            :data="excelData"
                            style="width: 350px;margin-top: 10px;">
                            <el-table-column
                                prop="time"
                                label="时间">
                            </el-table-column>
                            <el-table-column
                                label="访问量"
                                prop="all.todayCount"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                    <div ref="accessLog" class="echart" style="float: right;width: 60%"></div>
                </el-tab-pane>
                <el-tab-pane label="使用人次统计" name="useLog"
                >
                    <div style="float: left;margin-top: 40px;width: 300px">
                        <div>
                            <span style="font-size: 16px;">使用人次统计表</span>
                            <el-button
                                style="float: right"
                                type="primary"
                                size="small"
                                icon="el-icon-download"
                                @click="exportExcel('#q1', '使用人次统计表')"
                            >导出EXCEL
                            </el-button>
                        </div>
                        <el-table
                            id="q1"
                            max-height="580"
                            border
                            :data="excelData"
                            style="width: 350px;margin-top: 10px;">
                            <el-table-column
                                prop="time"
                                label="时间">
                            </el-table-column>
                            <el-table-column
                                label="使用人次"
                                prop="all.todayCount"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                    <div ref="useLog" class="echart" style="float: right;width: 60%"></div>
                </el-tab-pane>
                <el-tab-pane label="试卷使用量统计" name="paperUseLog"
                >
                    <div style="margin-top: 40px">
                        <div>
                            <span style="font-size: 16px;">试卷使用量统计表</span>
                            <el-button
                                style="float: right"
                                type="primary"
                                size="small"
                                icon="el-icon-download"
                                @click="exportExcel('#q2', '试卷使用量统计表')"
                            >导出EXCEL
                            </el-button>
                        </div>
                        <el-table
                            id="q2"
                            max-height="580"
                            border
                            :data="excelData"
                            style="margin-top: 10px">
                            <el-table-column
                                prop="time"
                                label="时间">
                            </el-table-column>
                            <el-table-column
                                v-for="(item,index) in industryData"
                                :key="index"
                                :property="item.id"
                                :index="item.index"
                                :label="item.name">
                                <template slot-scope="scope">
                                    <div>
                                        <p v-if="scope.row[scope.column.property]">
                                            {{ scope.row[scope.column.property].all.todayCount }}</p>
                                        <p v-else>0</p>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div ref="paperUseLog" class="echart" style="padding: 50px"></div>
                </el-tab-pane>
                <el-tab-pane label="试题使用量统计" name="questionUseLog"
                >
                    <div style="margin-top: 40px">
                        <div>
                            <span style="font-size: 16px;">试题使用量统计表</span>
                            <el-button
                                style="float: right"
                                type="primary"
                                size="small"
                                icon="el-icon-download"
                                @click="exportExcel('#q3', '试题使用量统计表')"
                            >导出EXCEL
                            </el-button>
                        </div>
                        <el-table
                            id="q3"
                            max-height="580"
                            border
                            :data="excelData"
                            style="margin-top: 10px;">
                            <el-table-column
                                prop="time"
                                label="时间">
                            </el-table-column>
                            <el-table-column
                                v-for="(item,index) in industryData"
                                :key="index"
                                :property="item.id"
                                :index="item.index"
                                :label="item.name">
                                <template slot-scope="scope">
                                    <div>
                                        <p v-if="scope.row[scope.column.property]">
                                            {{ scope.row[scope.column.property].all.todayCount }}</p>
                                        <p v-else>0</p>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div ref="questionUseLog" class="echart" style="padding: 50px"></div>
                </el-tab-pane>
                <el-tab-pane label="新增注册数统计" name="registerLogNew"
                >
                    <div style="float: left;margin-top: 40px;width: 300px">
                        <div>
                            <span style="font-size: 16px;">新增注册数统计表</span>
                            <el-button
                                style="float: right"
                                type="primary"
                                size="small"
                                icon="el-icon-download"
                                @click="exportExcel('#q4', '新增注册数统计表')"
                            >导出EXCEL
                            </el-button>
                        </div>
                        <el-table
                            id="q4"
                            max-height="580"
                            border
                            :data="excelData"
                            style="width: 350px;margin-top: 10px;">
                            <el-table-column
                                prop="time"
                                label="时间">
                            </el-table-column>
                            <el-table-column
                                label="新增注册数"
                                prop="all.todayCount"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                    <div ref="registerLogNew" class="echart" style="float: right;width: 60%"></div
                    >
                </el-tab-pane>
                <el-tab-pane label="注册数统计" name="registerLog"
                >
                    <div style="float: left;margin-top: 40px;width: 300px">
                        <div>
                            <span style="font-size: 16px;">注册数统计表</span>
                            <el-button
                                style="float: right"
                                type="primary"
                                size="small"
                                icon="el-icon-download"
                                @click="exportExcel('#q5', '注册数统计表')"
                            >导出EXCEL
                            </el-button>
                        </div>
                        <el-table
                            id="q5"
                            max-height="580"
                            border
                            :data="excelData"
                            style="width: 350px;margin-top: 10px;">
                            <el-table-column
                                prop="time"
                                label="时间">
                            </el-table-column>
                            <el-table-column
                                label="注册数"
                                prop="all.realAllCount"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                    <div ref="registerLog" class="echart" style="float: right;width: 60%"></div
                    >
                </el-tab-pane>
                <el-tab-pane label="使用时长统计" name="timeUseLog"
                >
                    <div style="float: left;margin-top: 40px;width: 300px">
                        <div>
                            <span style="font-size: 16px;">使用时长统计表</span>
                            <el-button
                                style="float: right"
                                type="primary"
                                size="small"
                                icon="el-icon-download"
                                @click="exportExcel('#q6', '使用时长统计表')"
                            >导出EXCEL
                            </el-button>
                        </div>
                        <el-table
                            id="q6"
                            max-height="580"
                            border
                            :data="excelData"
                            style="width: 350px;margin-top: 10px;">
                            <el-table-column
                                prop="time"
                                label="时间">
                            </el-table-column>
                            <el-table-column
                                label="使用时长"
                                prop="all.todayCount"
                                :formatter="formatterTime"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                    <div ref="timeUseLog" class="echart" style="float: right;width: 60%"></div
                    >
                </el-tab-pane>
                <el-tab-pane label="平均使用时长统计" name="timeUseLogAvg"
                >
                    <div style="float: left;margin-top: 40px;width: 300px">
                        <div>
                            <span style="font-size: 16px;">平均使用时长统计表</span>
                            <el-button
                                style="float: right"
                                type="primary"
                                size="small"
                                icon="el-icon-download"
                                @click="exportExcel('#q7', '平均使用时长统计表')"
                            >导出EXCEL
                            </el-button>
                        </div>
                        <el-table
                            id="q7"
                            max-height="580"
                            border
                            :data="excelData"
                            style="width: 350px;margin-top: 10px;">
                            <el-table-column
                                prop="time"
                                label="时间">
                            </el-table-column>
                            <el-table-column
                                label="平均使用时长"
                                prop="all.todayCount"
                                :formatter="formatterTime"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                    <div ref="timeUseLogAvg" class="echart" style="float: right;width: 60%"></div
                    >
                </el-tab-pane>
                <el-tab-pane label="下载次数统计" name="downloadLog"
                >
                    <div style="float: left;margin-top: 40px;width: 300px">
                        <div>
                            <span style="font-size: 16px;">下载次数统计表</span>
                            <el-button
                                style="float: right"
                                type="primary"
                                size="small"
                                icon="el-icon-download"
                                @click="exportExcel('#q8', '下载次数统计表')"
                            >导出EXCEL
                            </el-button>
                        </div>
                        <el-table
                            id="q8"
                            max-height="580"
                            border
                            :data="excelData"
                            style="width: 350px;margin-top: 15px;">
                            <el-table-column
                                prop="time"
                                label="时间">
                            </el-table-column>
                            <el-table-column
                                label="下载次数"
                                prop="all.todayCount"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                    <div ref="downloadLog" class="echart" style="float: right;width: 60%"></div
                    >
                </el-tab-pane>
            </el-tabs>
        </div>

    </div>
</template>

<script>
import {VuePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {get} from "@/api/request";
import FileSave from "file-saver";
import XLSX from "xlsx";
import echarts from "echarts";
import {tableRow2List, sourceType} from "./groupLog.js";

function typeName(typeCode) {
    return sourceType.find(v => v.value === typeCode).label;
}

function timeFormat(timeStr, groupBy) {
    if ("0001-01-01" === timeStr) {
        return "所有时间";
    }
    if (groupBy === "all") return "统计时间段合计";
    var date = new Date(timeStr);
    if (groupBy === "year") return date.getFullYear() + "年";
    if (groupBy === "month") return date.format("yyyy年MM月");
    return date.format("yyyy年MM月dd日");
}

const echartBaseOption = {
    color: [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
    ],
    grid: {
        top: 140
    }
};
const echartsOption = [
    {
        support(type) {
            return ["accessLog", "useLog", "downloadLog", "paperUseLog", "questionUseLog", "registerLog", "timeUseLog", "registerLogNew", "timeUseLogAvg"].includes(type);
        },
        work(echart, result, groupBy, selectTypes, tabType, endTime) {
            echart.off("updateAxisPointer");
            let logTypeName = {
                accessLog: "访问量",
                useLog: "使用人数",
                downloadLog: "下载次数",
                paperUseLog: "试卷使用量统计",
                questionUseLog: "试题使用量统计",
                registerLog: "注册数统计",
                registerLogNew: "新增注册数统计",
                timeUseLog: "使用时长统计",
                timeUseLogAvg: "平均使用时长统计",
            }[tabType];
            let option = {};
            if (
                groupBy === "all" || groupBy === "year" ||
                (result.length === 1 &&
                    Object.keys(result[0].data).length === 1)
            ) {
                if (result.length === 1) {
                    // 一个机构饼状图时间粒度所有
                    let group = result[0];
                    let {name, data} = group;
                    var t = Object.keys(data)[0];
                    data = data[t];
                    var e = endTime;
                    if (e) {
                        if (t === e) {
                            var title = "统计时间段内" + name;
                        } else {
                            var title = "统计时间段内" + name;
                        }
                    } else {
                        var title = name;

                    }
                    option = {
                        title: {
                            text: title + logTypeName,
                            left: "40%"
                        },
                        legend: {
                            top: "40",
                        },
                        series: [
                            {
                                name: name,
                                type: "pie",
                                radius: "50%",
                                label: {
                                    formatter: "{b}: {d}%",
                                },
                                data: selectTypes.map(typeCode => {
                                    return {
                                        value: data[typeCode].allCount,
                                        name: typeName(typeCode)
                                    };
                                }),
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: "rgba(0, 0, 0, 0.5)"
                                    }
                                }
                            }
                        ]
                    };
                } else if (groupBy === "all") {
                    // 多个机构情况 时间粒度所有 todo
                }
            } else {
                // 其他
                if (result.length === 1) {
                    let group = result[0];
                    let {name, data} = group;
                    let times = Object.keys(data);
                    // 单个机构
                    let x = times.map(v => timeFormat(v, groupBy));
                    console.log(x[0])
                    var e = endTime;
                    if (e) {
                        var title = "统计时间段内" + name;
                    } else {
                        var title = "统计时间段内" + name;

                    }
                    option = {
                        title: {
                            text: title + logTypeName,
                            left: "40%"
                        },
                        legend: {
                            top: 40,
                            data: [
                                "总计",
                                ...selectTypes.map(type => {
                                    return {
                                        name: typeName(type)
                                    };
                                })
                            ],
                        },
                        tooltip: {
                            trigger: "axis"
                        },
                        xAxis: [{type: "category"}],
                        yAxis: [
                            {
                                gridIndex: 0,
                                type: "value",
                                name: "次数",
                                axisLabel: {
                                    formatter: "{value} 次"
                                }
                            },
                            {
                                type: "value",
                                name: "总计次数",
                                splitLine: {
                                    show: false
                                },
                                axisLabel: {
                                    formatter: "{value} 次"
                                }
                            }
                        ],
                        grid: {
                            top: "20%",
                            bottom: "20%"
                        },
                        dataset: {
                            source: [
                                ["时间", ...x],
                                ...selectTypes.map(type => {
                                    return [
                                        typeName(type),
                                        ...times.map(
                                            time => data[time][type].todayCount
                                        )
                                    ];
                                })
                            ]
                        },
                        series: [
                            {
                                name: "总计",
                                data: times.map(
                                    time => data[time].all.allCount
                                ),
                                type: "line",
                                smooth: true,
                                yAxisIndex: 1
                            },
                            ...selectTypes.map(type => {
                                return {
                                    name: typeName(type),
                                    type: "line",
                                    smooth: true,
                                    seriesLayoutBy: "row",
                                    yAxisIndex: 0
                                };
                            }),
                        ]
                    };
                    echart.on("updateAxisPointer", function (event) {
                        const xAxisInfo = event.axesInfo[0];
                        if (xAxisInfo) {
                            const dimension = xAxisInfo.value + 1;
                            echart.setOption({
                                series: {

                                    id: "pie",
                                    label: {
                                        formatter: "{b}: ({d}%)"
                                    },
                                    encode: {
                                        value: dimension,
                                        tooltip: dimension
                                    }
                                }
                            });
                        }
                    });
                }
            }
            return {
                ...echartBaseOption,
                title: {
                    text: result.map(v => v.name).join("-") + logTypeName,
                    left: "center"
                },
                legend: {
                    top: 40
                },
                grid: {
                    top: 100,
                    bottom: 50
                },
                tooltip: {
                    trigger: "item"
                },
                ...option
            };
        }
    }
];
export default {
    name: "GroupUseLogDetail",
    components: {},
    mixins: [VuePage],

    data() {
        return {
            Permission: false,
            queryData: {
                sourceTypes: [
                    "PcZhiYe",
                    "PcGjtk",
                    "AppZhiYe",
                    "AppGjtk",
                    //"WpZhiYeApp",
                    "WpZSZhiYe",
                    "WpZSGjtk"
                ],
                times: null,
                groupBy: "all"
            },
            selectData: {
                type: "all",
                dataType: "all"
            },
            sourceTypes: sourceType,
            sourceTypeAll: true,
            sourceTypeIndeterminate: false,
            activeName: "accessLog",
            loading: false,
            endtime: null,
            excelData: [],
            excelD: [],
            industryData: [],
            name:"",
        };
    },
    computed: {
        ...mapState({
            userInfo: state => state.currentUser,
            userRole: state => state.user,
        }),
        groupIds() {
            return this.$route.query.groupId.split(",");
        },
        datePickerType() {
            // if (this.queryData.groupBy === "month") return "monthrange";
            // if (this.queryData.groupBy === "year") return "monthrange";
            return "daterange";
        },
        pickerOptions() {
            if (this.datePickerType === "monthrange") {
                return {
                    shortcuts: [
                        {
                            text: "本月",
                            onClick(picker) {
                                picker.$emit("pick", [new Date(), new Date()]);
                            }
                        },
                        {
                            text: "今年至今",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date(
                                    new Date().getFullYear(),
                                    0
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近六个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setMonth(start.getMonth() - 6);
                                picker.$emit("pick", [start, end]);
                            }
                        }
                    ]
                };
            }
            return {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ]
            };
        }
    },
    watch: {
        activeName() {
            this.loading = true;
            this.search();
        }
    },
    created() {
        this.cache = {};
        if (this.$route.query.start) {
            this.queryData.times = [
                this.$route.query.start,
                this.$route.query.end
            ];
        }
    },
    mounted() {
        this.search();
        if (this.userRole.roles.includes("maxAdmin")) {
            this.Permission = true;
        }
    },
    methods: {
        formatterTime(row, column, cellValue, index) {
            return cellValue ? cellValue.toFixed(2) + "分钟" : "";
        },
        search() {
            this.excelData = [];
            var s = this.queryData.times && this.queryData.times[0];
            var e = this.queryData.times && this.queryData.times[1];
            this.endtime = e
            this.loading = true;
            if (this.activeName === "paperUseLog" || this.activeName === "questionUseLog") {
                Promise.all(
                    this.groupIds.map(id => {
                        return Promise.all([
                            get("/log-records/admin-industry-record-detail-list", {
                                groupId: id,
                                sourceTypes: this.queryData.sourceTypes,
                                industry: "zhiye",
                                type: this.activeName,
                                start: s ? s : undefined,
                                end: e ? e : undefined,
                                dataType: this.queryData.dataType,
                                selectData: this.queryData.selectData,
                                groupBy: this.queryData.groupBy
                            }),
                            this.groupName(id), this.getIndustry()
                        ]).then(([data, name]) => {
                            return {
                                name,
                                data
                            };
                        });
                    })
                ).then(res => {
                    this.cldata(res);
                })
            } else {
                Promise.all(
                    this.groupIds.map(id => {
                        return Promise.all([
                            get("/log-records/admin-record-detail-list", {
                                groupId: id,
                                sourceTypes: this.queryData.sourceTypes,
                                type: {
                                    accessLog: "accessLog",
                                    useLog: "useLog",
                                    paperUseLog: "paperUseLog",
                                    questionUseLog: "questionUseLog",
                                    registerLogNew: "registerLogNew",
                                    registerLog: "registerLog",
                                    timeUseLog: "timeUseLog",
                                    timeUseLogAvg: "timeUseLogAvg",
                                    downloadLog: "downloadLog"
                                }[this.activeName],
                                start: s ? s : undefined,
                                end: e ? e : undefined,
                                dataType: this.queryData.dataType,
                                selectData: this.queryData.selectData,
                                groupBy: this.queryData.groupBy
                            }),
                            this.groupName(id)
                        ]).then(([data, name]) => {
                            return {
                                name,
                                data
                            };
                        });
                    })
                ).then(res => {
                    this.clsdata(res);
                })
            }
            Promise.all(
                this.groupIds.map(id => {
                    return Promise.all([
                        get("/log-records/admin-record-detail-list", {
                            groupId: id,
                            sourceTypes: this.queryData.sourceTypes,
                            type: {
                                accessLog: "accessLog",
                                useLog: "useLog",
                                paperUseLog: "paperUseLog",
                                questionUseLog: "questionUseLog",
                                registerLogNew: "registerLogNew",
                                registerLog: "registerLog",
                                timeUseLog: "timeUseLog",
                                timeUseLogAvg: "timeUseLogAvg",
                                downloadLog: "downloadLog"
                            }[this.activeName],
                            start: s ? s : undefined,
                            end: e ? e : undefined,
                            groupBy: this.queryData.groupBy
                        }),
                        this.groupName(id)
                    ]).then(([data, name]) => {
                        return {
                            name,
                            data
                        };
                    });
                })
            )
                .then(result => {
                    this.dataProcess(result);
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        clickSearch() {
            this.cache = {};
            this.search();
        },
        //试卷使用量和试题使用量单独处理
        cldata(result) {
            this.excelD = result[0].data;
            for (let key in this.excelD) {
                this.excelData.push({time: timeFormat(key, this.queryData.groupBy), ...this.excelD[key]})
                if (this.queryData.groupBy === "all" && this.queryData.times === null) {
                    for (let key in this.excelData[0]) {
                        if (this.excelData[0][key] instanceof Object) {
                            this.excelData[0][key].all.todayCount = this.excelData[0][key].all.allCount
                        }
                    }
                }
            }
            //总计行统计
            if (this.excelData.length > 1) {
                var obj = {};
                var j = 0;
                for (let i of this.industryData) {
                    this.excelData.forEach(item => {
                        if (item[i.id] instanceof Object) {
                            j += item[i.id].all.todayCount;
                        }
                    })
                    obj[i.id] = {all: {todayCount: j}};
                    j = 0;
                }
                this.excelData.push({time: "总计", ...obj})
            }
        },
        clsdata(result) {
            this.excelD = result[0].data;
            for (let key in this.excelD) {
                this.excelData.push({time: timeFormat(key, this.queryData.groupBy), ...this.excelD[key]})
                if (this.queryData.groupBy === "all" && this.queryData.times === null) {
                    this.excelData[0].all.todayCount = this.excelData[0].all.allCount
                }
            }
        }
        ,
        dataProcess(result) {
            // 生成总览的echarts
            if (this.echarts && this.echarts[this.activeName]) {
                this.echarts[this.activeName].dispose();
            }
            const mecharts = echarts.init(this.$refs[this.activeName]);
            mecharts.setOption(
                this.getEchartsOption(
                    mecharts,
                    this.activeName,
                    result,
                    this.activeName,
                    this.endtime
                )
            );
            if (!this.echarts) this.echarts = {};
            this.echarts[this.activeName] = mecharts;
        },
        getEchartsOption(echart, type, result, tabType, endTime) {
            return echartsOption
                .find(v => v.support(type))
                .work(
                    echart,
                    result,
                    this.queryData.groupBy,
                    this.queryData.sourceTypes,
                    tabType,
                    endTime
                );
        },
        getIndustry() {
            return get("/exam/industry/list", {size: 50}).then(res => {
                res.push({id:"gjtk", name: "高教题库"});
                this.industryData = res;
            });
        }
        ,
        async groupName(id) {
            if (parseInt(id) === -1){
                this.name = "全部机构";
                return "全部机构";
            }
            if (parseInt(id) === 0){
                this.name = "默认机构";
                return "默认机构";
            }
            return get("/user/sys/group/detail/" + id).then(res => {
                this.name = res.name;
                return res.name;
            });
        },
        handleCheckAllChange(val) {
            this.queryData.sourceTypes = val
                ? this.sourceTypes.map(v => v.value)
                : [];
            this.sourceTypeIndeterminate = false;
        },
        handleCheckedSourceTypeChange(value) {
            let checkedCount = value.length;
            this.sourceTypeAll = checkedCount === this.sourceTypes.length;
            this.sourceTypeIndeterminate =
                checkedCount > 0 && checkedCount < this.sourceTypes.length;
        },
        changeGroupBy(val) {
            if (val !== "all" && !this.queryData.times) {
                let now = new Date();
                if (val === "year") {
                    let s = new Date();
                    //s.setFullYear(now.getFullYear() - 5);
                    s.setTime(now.getTime() - 3600 * 1000 * 24 * 30);
                    this.queryData.times = [
                        s.format("yyyy-MM-dd"),
                        now.format("yyyy-MM-dd")
                    ];
                } else if (val === "month") {
                    let s = new Date();
                    //s.setFullYear(now.getFullYear() - 1);
                    s.setTime(now.getTime() - 3600 * 1000 * 24 * 30);
                    this.queryData.times = [
                        s.format("yyyy-MM-dd"),
                        now.format("yyyy-MM-dd")
                    ];
                } else {
                    let s = new Date();
                    s.setTime(now.getTime() - 3600 * 1000 * 24 * 30);
                    this.queryData.times = [
                        s.format("yyyy-MM-dd"),
                        now.format("yyyy-MM-dd")
                    ];
                }
            }
            this.clickSearch();
        },
        exportExcel(dom, title) {
            let workBook = XLSX.utils.table_to_book(
                document.querySelector(dom)
            );
            let write = XLSX.write(workBook, {
                bookType: "xlsx",
                bookSST: true,
                type: "array",
                sheet: "sheet1",
                Props: ["name"]
            });
            try {
                FileSave.saveAs(
                    new Blob([write], {
                        type: "application/octet-stream"
                    }),
                    title + ".xlsx"
                );
            } catch (e) {
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.table-search-box {
    margin-bottom: 0.2em;
}

.echart {
    width: 100%;
    height: calc(100vh - 10rem);
}
</style>
